<template>
	<view class="mainpadding2">
		<u-navbar :title="navTitle" placeholder autoBack>
		</u-navbar>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="main_size bold hei_text">名稱</view>
			<input type="text" class="textright hei_text main_size" placeholder="請输入名稱" v-model="name">
		</view>
		<view class="ffffff mainpadding_top flexbetween radius" @click="messageTime.timeShow=true;timevalue=0">
			<view class="hei_text bold titletext">開始時間</view>
			<view class="flexright">
				<input type="text" class="hei_text main_size  margin_right1" style="text-align: right;" disabled=""
					v-model="start_time" placeholder="請選擇開始時間">
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="ffffff mainpadding_top flexbetween radius" @click="messageTime.timeShow=true;timevalue=1">
			<view class="hei_text bold titletext">結束時間</view>
			<view class="flexright">
				<input type="text" class="hei_text main_size  margin_right1" style="text-align: right;" disabled=""
					v-model="end_time" placeholder="請選擇結束時間">
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="ffffff mainpadding_top flexbetween radius" @click="chooseGoodsFn">
			<view class="hei_text bold titletext">使用商品</view>
			<view class="flexright">
				<input type="text" class="hei_text main_size  margin_right1" style="text-align: right;" disabled=""
					placeholder="請選擇使用商品" v-show="!goods_ids">
				<text class="hei_text main_size  margin_right1" v-show="goods_ids">已選擇</text>
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="main_size bold hei_text">購買数量</view>
			<input type="text" placeholder="請輸入購買数量" class="textright" v-model="num">
		</view>
		<view class="mainpadding_top ffffff radius flexbetween" @click="activity_type_show=true">
			<view class="main_size bold hei_text">活動類型</view>
			<view class="flexright">
				<input type="text" class="hei_text main_size bold margin_right1" style="text-align: right;" disabled=""
					v-model="activity_type_name" placeholder="請选择活動類型">
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween" v-if="activity_type==4">
			<view class="main_size bold hei_text">折扣金额</view>
			<input type="text" placeholder="請輸入折扣金额" class="textright" v-model="price">
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="main_size bold hei_text">方式</view>
			<view class="flexright">
				<u-radio-group v-model="type" placement="row" @change="chageDataType">
					<u-radio activeColor="red" name="1" label="全部" :customStyle="{marginRight: '30rpx'}"></u-radio>
					<u-radio activeColor="red" name="2" label="最低算"></u-radio>
				</u-radio-group>
			</view>
		</view>
		
		<view class="mainpadding_top ffffff radius flexbetween" v-if="activity_type==2">
			<view class="main_size bold hei_text">折數</view>
			<input type="text" placeholder="請輸入折數" class="textright" v-model="rate">
		</view>
		
		<view class="ffffff" v-if="activity_type==3">
			<view class="mainpadding_top  radius flexbetween" @click="cclAddData.ccLshow=true">
				<view class="main_size bold hei_text">抽抽樂設定</view>
				<view class="flexright">
					<u-icon name="plus"></u-icon>
				</view>
			</view>
			<view class="" v-for="(ite,index) in cclData" :key="index">
				<view class=" flexbetween radius" style="padding: 30rpx;">
					<view class="main_size bold hei_text">{{ite.name}}</view>
					<view class="flexleft" @click.stop="delCclitem(index)">
						<u-icon name="trash" color="#999" size="16"></u-icon>

						<view class="xiaohei">刪除</view>
					</view>
				</view>
				<view class="flexleft radius " style="padding: 0 0 20rpx 20rpx;">
					<view class="xiaohui margin_right2   riqik">
						折扣/金额:{{ite.num}}
					</view>
					<view class="xiaohui margin_right2  riqik">
						类型:{{ite.data_type==1?'折扣':'金额'}}
					</view>
					<view class="xiaohui margin_right2   riqik">
						概率:{{ite.rate}}%
					</view>
				</view>
			</view>
		</view>
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm"></timePicker>
		<u-modal :show="cclAddData.ccLshow" title="抽抽樂設定" confirmText="確認" confirmColor="#FF5C00" @confirm="cclSure"
			cancelText="取消" @cancel="cancelCclPop" showCancelButton>
			<view class="slot-content" style="width: 600rpx;">
				<view class="flexbetween margin_top">
					<view class="main_size bold hei_text">名稱：</view>
					<input type="text" class="textright" v-model="cclAddData.name" placeholder="請输入">
				</view>
				<view class="flexbetween margin_top">
					<view class="main_size bold hei_text" style="min-width: 200rpx;">類型：</view>
					<view class="flexright">
						<u-radio-group v-model="cclAddData.data_type" placement="row" @change="chageCclDataType">
							<u-radio activeColor="red" name="1" label="折扣"></u-radio>
							<u-radio activeColor="red" name="2" label="金额"
								:customStyle="{marginLeft: '10px'}"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="main_size bold hei_text" style="min-width: 200rpx;">折扣/金额：</view>
					<input type="number" class="textright" placeholder="請输入" v-model="cclAddData.num">
				</view>
				<view class="flexbetween margin_top">
					<view class="main_size bold hei_text" style="min-width: 200rpx;">概率：</view>
					<input type="number" class="textright" placeholder="請输入" v-model="cclAddData.rate">
				</view>
			</view>
		</u-modal>
		<u-picker :show="activity_type_show" :columns="activityTypeData" keyName="name"
			@cancel="activity_type_show=false" @confirm="chageActivityType"></u-picker>
		<view class="posibottom mainpadding2">
			<view class="submitbtn" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	import HttpRequest from 'uview-ui/libs/luch-request'

	export default {
		data() {
			return {
				start_time: '2025-02-01',
				end_time: '2025-10-01',
				name: '商品活動1',
				type: '1',
				num: "5",
				rate: "5",
				price: "100",
				activity_type: '1',
				activity_type_name: '贈品',
				activity_type_show: false,
				id: 0,
				navTitle: '添加商品活動',
				cclAddData: {
					name: '',
					data_type: "1", //1=折扣  2=金额
					num: '',
					rate: '',
					ccLshow: false
				},
				goods_ids: "",
				activityTypeData: [
					[{
						id: 1,
						name: '贈品'
					}, {
						id: 2,
						name: '折扣'
					}, {
						id: 3,
						name: '抽抽樂'
					}, {
						id: 4,
						name: '金额'
					}, ]
				],
				cclData: [],
				messageTime: {
					timeShow: false,
					title: "選擇時間",
					mode: "date", //date日期，datetime年月日时分秒，time時間，year-month年月
				},
				timevalue: 0, //0開始，1结束
				listid: "",
				issubmit: false
			}
		},
		onLoad(options) {
			if (options.id != 0) {
				this.listid = options.id
				this.navTitle = "編輯商品活動"
				this.getDetail()
			}
			uni.$on("chooseGoods", data => {
				this.goods_ids = data
			})
		},
		onUnload() {
			uni.$off("chooseGoods")
		},
		methods: {
			getDetail() {
				this.http.request("/api/Goodsctivitycl/goodsActivityDetail", 'GET', {
					id: this.listid
				}).then(res => {
					let data = res.data
					this.name = data.name
					this.activity_type = data.activity_type
					this.activity_type_name = this.returntype(data.activity_type)
					this.goods_ids = data.goods_ids
					this.num = data.num
					this.price = data.price
					this.rate = data.rate
					this.cclData = data.ccl_data_text
					this.start_time = data.start_time_text
					this.end_time = data.end_time_text
					this.type = data.type.toString()
				})
			},
			returntype(val) {
				if (val == 1) return "贈品"
				if (val == 2) return "折扣"
				if (val == 3) return "抽抽樂"
				if (val == 4) return "金額"
			},
			submit() {
				if (this.issubmit) return
				if (this.name == "") {
					this.http.toast("請輸入名稱")
					return false
				}
				if (this.start_time == "") {
					this.http.toast("請選擇開始時間")
					return false
				}
				if (this.end_time == "") {
					this.http.toast("請選擇結束時間")
					return false
				}
				if (this.goods_ids == "") {
					this.http.toast("請選擇使用商品")
					return false
				}
				if (this.activity_type == 2 && this.rate == "") {
					this.http.toast("請輸入折數")
					return false
				}
				if (this.activity_type == 3 && this.cclData.length == 0) {
					this.http.toast("請至少添加一條抽抽樂設定信息")
					return false
				}
				if (this.activity_type == 4 && this.price == "") {
					this.http.toast("請輸入折扣金额")
					return false
				}
				if(!this.num){
					this.http.toast("請輸入購買数量")
					return false
				}
				this.issubmit = true
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				let data = {
					shop_id: uni.getStorageSync("shop_id"),
					name: this.name,
					start_time: this.start_time,
					end_time: this.end_time,
					goods_ids: this.goods_ids,
					activity_type: this.activity_type,
					type: this.type,
					num: this.num,
					rate: this.rate,
					price: this.price,
					ccl_data: this.cclData,
				}
				let url = "/api/Goodsctivitycl/addGoodsActivity"
				if (this.listid) {
					this.$set(data, "id", this.listid)
					url = "/api/Goodsctivitycl/editGoodsActivity"
				}
				this.http.request(url, "POST", data).then(res => {
					uni.hideLoading()
					this.http.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					} else {
						this.issubmit = false
					}
				})
			},
			chooseGoodsFn() {
				uni.navigateTo({
					url: '/pages/workbench/goodsactive/chooseGoods?goods_ids=' + this.goods_ids
				})
			},
			timeConfirm(e) {
				if (this.timevalue == 0) {
					this.start_time = e
				}
				if (this.timevalue == 1) {
					this.end_time = e
				}
			},
			delCclitem(index) {
				this.cclData.splice(index, 1);
			},
			cclSure() {
				let cclAddData = this.cclAddData;
				this.cclData.unshift({
					name: cclAddData.name,
					data_type: cclAddData.data_type, //1=折扣  2=金额
					num: cclAddData.num,
					rate: cclAddData.rate,
				});
				this.cancelCclPop();
			},
			cancelCclPop() {
				this.cclAddData = {
					name: '',
					data_type: "1", //1=折扣  2=金额
					num: '',
					rate: '',
					ccLshow: false
				}
			},
			chageCclDataType(e) {
				this.cclAddData.data_type = e;
			},
			chageDataType(e) {
				this.type = e;
			},
			chageActivityType(e) {
				this.activity_type = e.value[0]['id'];
				this.activity_type_name = e.value[0]['name'];
				this.activity_type_show = false;
			},


		}
	}
</script>

<style>
	.riqik {
		border: 1rpx solid #999;
		padding: 5rpx 10rpx;
	}
</style>